        <?
        require_once('header.php'); // uri  
        ?>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
       	<link rel="stylesheet" href="css/mainpage.css">
        <link rel="stylesheet" href="css/kendo.dataviz.min.css">
        <link rel="stylesheet" href="css/datePicker.css">
        <script type="text/javascript" src="js/kendo.dataviz.min.js"></script>
        <script type="text/javascript" src="js/stat.js"></script>
        <script>
        var shelfid='<?=$this->data['userpremium']['shelfid']?>';
        var shelfname='<?=$this->data['usershelf']['title']?>';
        </script>
        <script type="text/javascript" src="js/date.js"></script>
        <script type="text/javascript" src="js/jquery.datePicker.js"></script>
        
       	<div class="wrpOuter">
            <div class="wrpPage">
                
        <?
        require_once('subheader.php'); // uri  
        ?>      
                <div class="wrpOuterBody">
                    <div class="wrpBody clear">
                        <?
                        require_once('menu.php'); // uri  
                        ?>
                        <!-- contentlist -->
                       
                        <div class="wrpOuterContentList">
                            <div class="wrpInnerContentlist">

                                <!-- End Banner -->
                                <div class="navTopBar">
                                    <h2 class="tabShowTopBar"><? if($namecat){ echo $namecat;  }else{?>Statistic<?}?></h2>
                                    <div class="wrpSort">
                                        <div class="btnSort"><i></i><em>sort <span id="sortText">ALL</span></em>
                                            <div class="wrpUllistSort">
                                                <ul class="ullisSort">
                                                    <li class="liSort"><div onclick="getStat(0)" id="sortRow0" class="listSort">ALL</div></li>
                                                    <li class="liSort"><div onclick="getStat(1)" id="sortRow1" class="listSort">Date</div></li>
                                                    <li class="liSort"><div onclick="getStat(2)" id="sortRow2" class="listSort">Month</div></li>
                                                    <li class="liSort"><div onclick="getStat(3)" id="sortRow3" class="listSort">Years</div></li>
                                                    <li class="liSort"><div onclick="custom(4)" id="sortRow4" class="listSort">Custom</div></li>   
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                 <div id="customdate" >
                                    <div class="stDate">Start <input id="startdate"></div> 
                                    <div class="stEnd">End <input id="enddate"></div>
                                    <button type="button" onclick="getStat(4)" value="search" class="srchDate">Search</button>
                                 </div> 
                                <div class="wrpOuterListTile" id="chart" style="">
                                
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
         <script>
       
         function custom(sort)
         {
            $("#customdate").show();
         
         }
              //  function createChart() {
//                    $("#chart").kendoChart({
//                        title: {
//                            text: "What is you favourite sport?"
//                        },
//                        legend: {
//                           position: "top"
//                        },
//                        seriesDefaults: {
//                            labels: {
//                                template: "#= category # - #= kendo.format('{0:P}', percentage)#",
//                                position: "outsideEnd",
//                                visible: true,
//                                background: "transparent"
//                            }
//                        },
//                        series: [{
//                            type: "pie",
//                            data: [{
//                                category: "Football",
//                                value: 35
//                            }, {
//                                category: "Basketball",
//                                value: 25
//                            }, {
//                                category: "Volleyball",
//                                value: 20
//                            }, {
//                                category: "Rugby",
//                                value: 10
//                            }, {
//                                category: "Tennis",
//                                value: 10
//                            }]
//                        }],
//                        tooltip: {
//                            visible: true,
//                            template: "#= category # - #= kendo.format('{0:P}', percentage) #"
//                        }
//                    });
//                }

                $(document).ready(function() {
                getStat(0);
                   // setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
//                        createChart();

//                        $("#example").bind("kendo:skinChange", function(e) {
//                            createChart();
//                        });
//                    }, 400);

//                    $(".configuration-horizontal").bind("change", refresh);
                });

               // function refresh() {
//                    var chart = $("#chart").data("kendoChart"),
//                        pieSeries = chart.options.series[0],
//                        labels = $("#labels").prop("checked"),
//                        alignInputs = $("input[name='alignType']"),
//                        alignLabels = alignInputs.filter(":checked").val();

//                    chart.options.transitions = false;
//                    pieSeries.labels.visible = labels;
//                    pieSeries.labels.align = alignLabels;

//                    alignInputs.attr("disabled", !labels);

//                    chart.refresh();
//                }
           
            </script>
       
        
        
        <?
        require_once('footer.php'); // uri  
        ?>